<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>文件上传</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #f00;
        }

        button{
            margin-top: 20px;
            margin-left: 100px;
            padding: 12px 40px;
            font-size: 16px;
            letter-spacing: .1rem;
            background-color: #fff;
            border-radius: 3px;
            border: 1px solid #999;
        }

        .list {
            position: absolute;
            top: 50px;
            left: 360px;
            display: flex;
            width: 300px;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .list li {
            position: relative;
            width: 31%;
        }

        .list li img {
            width: 100%;
        }

        .list li div.mask {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
        }

        .list li div.mask div {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }
    </style>
</head>
<body>
    <!-- 
        1. 选择文件上传
        2. 拖拽上传
     -->

    <input type="file" class="ipt" multiple>

    <div class="box"></div>

    <button class="btn">点击上传</button>

    <ul class="list">
    </ul>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        var ipt = document.querySelector(".ipt"),
            box = document.querySelector(".box"),
            btn = document.querySelector(".btn"),
            fileBody = null;

        ipt.onchange = function (){
            // console.log("选择路径", this.value);
            console.log("选择到的文件列表", this.files);
            /* 文件列表中是 File 对象
                - name：文件名
                - size：文件大小   用于筛选符合大小条件的文件
                - type：文件类型   用于筛选符合类型的文件
            */
            var file = this.files[0];
            
            fileBody = file;
            if(file.size > 1024 * 1024){
                alert("请上传小于 1M 的文件");
            }else if(!(/image/.test(file.type))){
                alert("请上传图片类型");
            }else {
                /* 
                FileReader  -> 创建实例
                    一般先设置完成监听事件，然后再读取文件
                    通过 readAsDataURL 来读取文件成 base64 格式
                */
                var fileReader = new FileReader();
                fileReader.onload = function (){
                    // console.log("成功后的结果", this.result);
                    // 创建图片
                    box.innerHTML = `<img src="${ this.result }">`;
                }
                fileReader.onerror = function (){
                    console.log("失败的原因", this.error);
                }
                fileReader.readAsDataURL(file);
            }
        }

        /* 
        // 上传图片
        http://www.bufantec.com/api/test/user/upload  file：file文件   post
        // 获取图片列表
        http://www.bufantec.com/api/test/user/fileList  start、limit
        // 删除图片 
        http://www.bufantec.com/api/test/user/delFile  id:xx  get
        */
        btn.onclick = function (){
            /* 
                创建表单数据 -> FormData
                    1. 创建表单实例
                    2. 给实例添加内容  formData.append(key, value) formData.delete(key)
                    3. 作为上传的参数发送
            */
            var formData = new FormData();
            formData.append("file", fileBody);

            var xhr = new XMLHttpRequest();
            xhr.responseType = "json";
            xhr.onload = function () {
                console.log(xhr.response);
                getImage(); // 刷新上传列表
            }
            xhr.open("POST", "http://www.bufantec.com/api/test/user/upload");
            // xhr.setRequestHeader("content-type", "multipart/form-data") 发送文件类型可以自动识别
            xhr.send(formData);
        }

        // 事件委托 -- 删除图片
        $(".list").on("click", 'li', function (){
            $(this).find(".mask").fadeIn();
        })

        $(".list").on("click", ".mask div", function (){
            console.log(this.dataset.id);
            $.ajax({
                url: "http://www.bufantec.com/api/test/user/delFile",
                data: {
                    id: this.dataset.id
                },
                success(res){
                    console.log(res);
                    if(res.code == "success"){
                        getImage();
                    }else {
                        alert("删除失败");
                    }
                }
            })
        })

        getImage();
        function getImage(){
            $.ajax({
                url: "http://www.bufantec.com/api/test/user/fileList",
                data: {
                    limit: 30
                },
                success(res){
                    console.log(res);
                    var str = "";
                    for(var i = 0; i < res.data.list.length; i ++){
                        str += `<li><img src="http://bufantec.com/${ res.data.list[i].url }"><div class="mask"><div data-id="${res.data.list[i].id}">删除</div></div></li>`;
                    }
                    $(".list").html(str);
                }
            })
        }

    </script>
</body>
</html>